"use client";

import Markdown from "react-markdown";
import { cn } from "@/lib/utils";

type MarkdownEditorProps = {
  value: string;
  onChange: (value: string) => void;
  heightMinus?: string;
  className?: string;
  placeholder?: string;
};

export default function MarkdownEditor({ value, onChange, heightMinus, className, placeholder }: MarkdownEditorProps) {
  return (
    <div
      className={cn("grid grid-cols-2 gap-2", className)}
      style={{ height: `calc(100vh - ${heightMinus || "80px"})` }}
    >
      <textarea
        style={{ width: "100%" }}
        placeholder={placeholder}
        className="border-r border-zinc-200 p-2"
        rows={7}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
      <Markdown className="prose">{value}</Markdown>
    </div>
  );
}
